<template>
  <el-alert v-show="isMobile" center title="欢迎登录" type="success" :closable="false" />
  <SvgIcon icon="guide" class="login-tips" @click="loginTipVisible = true" />
  <div class="login-container">
    <div class="g-polygon-1 div"></div>
    <div class="g-polygon-2 div"></div>
    <div class="g-polygon-3 div"></div>
    <div class="g-polygon-4 div"></div>
    <div class="g-polygon-5 div"></div>
    <el-form ref="loginFormRef" class="login-form" :model="loginForm" :rules="loginRules">
      <div class="title-container">
        <h3 class="title">用户登录</h3>
      </div>
      <div class="form">
        <el-form-item prop="username" class="form-item">
          <el-input 
            :prefix-icon="User" 
            placeholder="请输入用户名" 
            name="username" 
            clearable
            v-model="loginForm.username"
            :input-style="{
              borderTop: 'none',
              borderLeft: 'none',
              borderRight: 'none',
              height: '40px'
            }"
          />
        </el-form-item>
        <el-form-item prop="password" class="form-item">
          <el-input 
            :prefix-icon="Lock"
            placeholder="请输入密码" 
            :type="type" 
            name="password" 
            clearable
            v-model="loginForm.password"
            :input-style="{
              borderTop: 'none',
              borderLeft: 'none',
              borderRight: 'none',
              height: '40px',
              borderRadius: '5px'
            }"
          />
        </el-form-item>
        <el-button @click="onClickLogin" :loading="loading" type="primary" class="login-btn">
          登录
        </el-button>
      </div>
      <div class="flex login-options">
        <div class="flex">
          <el-checkbox label="记住我" v-model="autologin" />
        </div>
        <router-link to="/reset-password">
          <el-link type="primary">忘记密码？</el-link>
        </router-link>
      </div>
      <div class="flex login-type">
        <div class="flex">
          <span style="font-size:12px;color:#666;margin-right:10px">其他登录方式</span>
          <img class="icon" src="../../assets/icons/alipay.png" alt="支付宝" />
          <img class="icon" style="margin:0 10px" src="../../assets/icons/wechat.png" alt="微信" />
          <img class="icon" src="../../assets/icons/sina.png" alt="微博" />
        </div>
        <div class="mobile-login-text" @click="loginModeVisible = true">手机验证码登录</div>
      </div>
    </el-form>
    <LoginMode v-model="loginModeVisible" />
    <LoginTips v-model="loginTipVisible" />
  </div>
</template>

<script setup>
/* eslint-disable */
import {ref, onMounted, onUnmounted, defineAsyncComponent} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {User, Lock} from '@element-plus/icons-vue'
import {validatePassword} from './rule'
import {setItem, setToken, setUser} from '@/utils/local'
import {MENU} from '@/utils/constant'
import routes from '@/router/routes'
import useConfigStore from '@/store/config'
import useAppConfig from '@/hooks/useAppConfig'
import loginMock from '@/plugins/login-mock'

const LoginMode = defineAsyncComponent(() => import('./components/LoginMode'))
const LoginTips = defineAsyncComponent(() => import('./components/LoginTips'))

const router = useRouter()
const configStore = useConfigStore()
const {isMobile} = useAppConfig()

const loginFormRef = ref(null)
const type = ref('password')
const loading = ref(false)
const loginModeVisible = ref(false)
const loginTipVisible = ref(false)
const autologin = ref(false)
const loginForm = ref({
  username: 'user',
  password: '456789'
})
const loginRules = ref({
  username: [{required: true, message: '用户名为必填项', trigger: 'blur'}],
  password: [{
    trigger: 'blur',
    required: true, 
    message: '密码不能少于6位', 
    validator: validatePassword()
  }]
})

onMounted(() => {
	onResize()
	window.addEventListener('resize', onResize)
})
onUnmounted(() => window.removeEventListener('resize', onResize))

/* methods */
// 监听屏幕尺寸
function onResize() {
	configStore.SET_isMobile(document.body.clientWidth <= 1200)
}

// 是否显示密码
// eslint-disable-next-line no-unused-vars
function onShowPwd() {
  if (type.value === 'password') type.value = 'text'
  else type.value = 'password'
}
// 用户登录
function onClickLogin() {
  const loginRefVal = loginFormRef.value
  loginRefVal.validate(valid => {
    if (!valid) return
    loading.value = true
    console.log(loginForm.value)
    const {flag, data = {}, authorities} = loginMock
    if (flag) {
      loading.value = false
      ElMessage.success('登录成功')
      const userAuths = {auths: authorities}
      const {id, isDelete, isUsed, menus, name, nickname, password, roles, ukMobile, used} = data.userInfo
      const userInfoAssign = {id, isDelete, isUsed, menus, name, nickname, password, roles, ukMobile, used}
      setToken(data.credentials)
      setUser({...userInfoAssign, ...userAuths})
      setItem(MENU, routes)
      router.replace({path: '/'})
    }
    loading.value = false
  })
}
</script>

<style lang="scss" scoped>
@import './index.scss';

.login-form {
  .form {
    :deep(.el-input__inner){
      border-top: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
      border-radius: 0 !important;
    }
  }
}
</style>